import React, { useState } from 'react'
import DateTimePicker from '@react-native-community/datetimepicker';
import { SafeAreaView, Button, Text } from 'react-native'

export const MDatetimepicker = () => {
  const [date, setDate] = useState(new Date(new Date()));
  const [mode, setMode] = useState('date');
  const [show, setShow] = useState(false);

  const onChange = (event: any, selectedDate: any) => {
    const currentDate = selectedDate;
    setShow(false);
    setDate(currentDate);
  };

  const showMode = (currentMode: React.SetStateAction<string>) => {
    setShow(true);
    setMode(currentMode);
  };

  const showDatepicker = () => {
    showMode('date');
  };

  const showTimepicker = () => {
    showMode('time');
  };

  return (
    <SafeAreaView>
      <Button onPress={showDatepicker} title="Show date picker!" />
      <Button onPress={showTimepicker} title="Show time picker!" />
      <Text>selected: {date.toLocaleString()}</Text>
      {show && (
        <DateTimePicker
          mode={mode}//partially (仅支持 date/time 模式)
          style={{ width: 180, height: 80, backgroundColor: '#FFFFDD' }}
          display='default' //partially (支持"default"，"spinner"，"compact"，"inline")
          onChange={onChange}//partially (仅支持 type 为 set 类型)
          value={date}
          is24Hour={true}
          disabled={false}
          textColor={'#FFFFFF'}
        />
      )}
    </SafeAreaView>
  );
};

export default MDatetimepicker;